.x-uploader {
	position: relative;
	display: inline-block;

	&__wrapper {
		display: flex;
		flex-wrap: wrap;
	}

	&__input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden; // to clip file-upload-button
		cursor: pointer;
		opacity: 0;

		&-wrapper {
			position: relative;
		}
	}

	&__upload {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: $uploader-size;
		height: $uploader-size;
		margin: 0 $padding-xs $padding-xs 0;
		background-color: $uploader-upload-background-color;
		border: 1px dashed $uploader-upload-border-color;
		border-radius: $uploader-upload-border-radius;

		&-icon {
			color: $uploader-icon-color;
			font-size: $uploader-icon-size;
		}

		&-text {
			margin-top: $padding-xs;
			color: $uploader-text-color;
			font-size: $uploader-text-font-size;
		}
	}

	&__preview {
		position: relative;
		margin: 0 $padding-xs $padding-xs 0;
		cursor: pointer;

		&-image {
			display: block;
			width: $uploader-size;
			height: $uploader-size;
		}

		&-delete {
			position: absolute;
			top: -8px;
			right: -8px;
			color: $uploader-delete-color;
			font-size: $uploader-delete-icon-size;
			background-color: $uploader-delete-background-color;
			border-radius: 100%;
		}
	}

	&__file {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: $uploader-size;
		height: $uploader-size;
		background-color: $uploader-file-background-color;
		border-radius: $uploader-upload-border-radius;

		&-icon {
			color: $uploader-file-icon-color;
			font-size: $uploader-file-icon-size;
		}

		&-name {
			box-sizing: border-box;
			width: 100%;
			margin-top: $uploader-file-name-margin-top;
			padding: $uploader-file-name-padding;
			color: $uploader-file-name-text-color;
			font-size: $uploader-file-name-font-size;
			text-align: center;
		}
	}
}
